<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1,maximum-scale=1">
		<title>H5移动端选择器</title>
		<link rel="stylesheet" href="css/lay-picker.min.css" />
	</head>
	<style>
		#app{
			padding: 20px;
		}
		#app>div{
			margin-bottom: 10px;
		}
		
		input{
			border: 1px solid #1E90FF;
			border-radius: 4px;
			height: 30px;
			line-height: 30px;
			outline: none;
			min-width: 200px;
			padding-left: 10px;
		}
		input:hover,
		input:focus{
			border: 1px solid #1E90FF;
			box-shadow: #1e90ff30 0 0 0 4px;
		}
		
	</style>
	<body>
		<div id="app">
			<h2>日期选择器</h2>
			<div>
				选择年份：<input type="text" id="year" autocomplete='off'/>
			</div>
			<div>
				选择年月：<input type="text" id="month" autocomplete='off'/>
			</div>
			<div>
				选择日期：<input type="text" id="date" autocomplete='off'/>
			</div>
			<div>
				搜索设置：<input type="text" id="val" autocomplete='off'/>
			</div>
			<div>
				自定义html：<input type="text" id="custom" autocomplete='off'/>
			</div>
			<div style="margin: 20px 0;">
				<a class="lay-picker-bottom-btn lay-picker-bottom-btn-confirm" style="width: 120px;text-align: center;" href="index.html">前往旧版样式</a>
			</div>
			<div>
				最小最大日期限制：<input type="text" id="minMaxDate" autocomplete='off'/>
			</div>
			<div>
				最小最大时间限制：<input type="text" id="minMaxTime" autocomplete='off'/>
			</div>
			<div>
				最小最大时间日期限制：<input type="text" id="minMaxDateTime" autocomplete='off'/>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
	<script type="text/javascript" src="js/lay-picker.min.js"></script>
	<script>
		//-----------------------------------------------------------------------------------------------------------------
		var date_obj = lay_picker_date.getDateTime();
		var years = lay_picker_date.getYear();
		var months = lay_picker_date.getMonth(
				[
					{value: date_obj.year},
				]
			);
		// 选择年
		layPicker.init({
			elem: '#year', // 绑定元素
			type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
			options: 'year', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			title: '选择器标题',
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(result){
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#year").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		// 选择年月
		layPicker.init({
			elem: '#month', // 绑定元素
			type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
			title: '选择器标题',
			radius: 15,
			data: [years, months], // 列数值
			onSuccess: function(index, elem){ // 渲染成功回调
				// 默认值设置（赋值）
				layPicker.setValue(index, [
					{value: date_obj.year},
					{value: date_obj.month},
				])
			},
			onSelect: function(result){
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#month").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		// 选择日期
		layPicker.init({
			elem: '#date', // 绑定元素
			type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
			radius: 15,
			options: 'date', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#date").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		
		//-----------------------------------------------------------------------------------------------------------------
		// 选择日期
		layPicker.init({
			elem: '#custom', // 绑定元素
			type: 3, // 类型2微信效果， 类型3自定义，不设置则默认效果
			radius: 15,
			content: '<div>慕云枫同学是后端开发人员</div>',
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		
		var field_arr = [
			{
				title: '张三',
				id: 101,
			},{
				title: '李四',
				id: 102,
			},{
				title: '王五',
				id: 103,
			},
		]
		//-----------------------------------------------------------------------------------------------------------------
		// 赋值
		var layIndex = layPicker.init({
			elem: '#val', // 绑定元素
			type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
			data: [field_arr],
			textField: 'title',
			valueField: 'id',
			btns: ['重置', '确认'], // 自定义按钮文字
			//search: true, // 是否开启搜索【注：只对单列有效】
			search: '请输入关键字搜索', // 开启搜索，并替换提示
			title: '可搜索内容',
			radius: 15, // 默认无圆角，设置圆角值
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#val").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
			onShow: function(index){ // 点击显示回调
				//layPicker.setValue(index, [{id: 102}]);
			},
		})
		
		//-----------------------------------------------------------------------------------------------------------------
		// 选择最小最大日期
		layPicker.init({
			elem: '#minMaxDate', // 绑定元素
			type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
			radius: 15,
			minDate: '2022-08-02',
			maxDate: '2023-11-05',
			options: 'date', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			onSuccess: function(index, elem){ // 渲染成功回调
				// 默认值设置（赋值）
				layPicker.setValue(index, [
					{value: 2023},
					{value: 12},
					{value: 02},
				])
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#minMaxDate").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		// 选择最小最大日期
		layPicker.init({
			elem: '#minMaxTime', // 绑定元素
			type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
			radius: 15,
			minDate: '14:39:11',
			maxDate: '18:02:12',
			options: 'timesecond', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			onSuccess: function(index, elem){ // 渲染成功回调
				// 默认值设置（赋值）
				layPicker.setValue(index, [
					{value: 15},
					{value: 01},
					{value: 10},
				])
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#minMaxTime").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		// 选择最小最大日期时间
		layPicker.init({
			elem: '#minMaxDateTime', // 绑定元素
			type: 2, // 类型2微信效果， 类型3自定义，不设置则默认效果
			radius: 15,
			minDate: '2022-08-02 14:39:11',
			maxDate: '2023-11-05 18:02:12',
			options: 'datetimesecond', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			onSuccess: function(index, elem){ // 渲染成功回调
				// 默认值设置（赋值）
				layPicker.setValue(index, [
					{value: 2023},
					{value: 12},
					{value: 02},
					{value: 15},
					{value: 01},
					{value: 10},
				])
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#minMaxDateTime").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		
		// 删除指定
		//layPicker.remove(layIndex);
		// 删除所有
		//layPicker.removeAll();
		
	</script>

</html>